{% extends 'base/base.html' %}

{% block title %}开盒结果 - {{ block.super }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-lg">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0">{{ title }}</h3>
                </div>
                <div class="card-body">
                    {% if not is_view_result %}
                    <div id="drawAnimation" class="text-center mb-5">
                        <div class="box-scene">
                            <div class="box-3d">
                                <div class="box-face box-front">
                                    <span class="box-logo">?</span>
                                </div>
                                <div class="box-face box-back">
                                    <span class="box-logo">?</span>
                                </div>
                                <div class="box-face box-right">
                                    <span class="box-logo">?</span>
                                </div>
                                <div class="box-face box-left">
                                    <span class="box-logo">?</span>
                                </div>
                                <div class="box-face box-top">
                                    <span class="box-logo">?</span>
                                </div>
                                <div class="box-face box-bottom">
                                    <span class="box-logo">?</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3 draw-status">
                            <span class="badge bg-info p-2 draw-message">正在开盒中...</span>
                        </div>
                    </div>
                    {% endif %}
                    
                    <div id="resultContent" class="{% if not is_view_result %}d-none{% endif %}">
                        <!-- 结果内容 -->
                        <div class="row">
                            <div class="col-md-6 text-center">
                                <img src="{{ product.image_url|default:'/static/images/no-image.png' }}" alt="{{ product.name }}" class="img-fluid rounded shadow" style="max-height: 300px;">
                            </div>
                            <div class="col-md-6">
                                <h3 class="mb-3">恭喜您获得：{{ product.name }}</h3>
                                <div class="product-details">
                                    <p><strong>商品描述：</strong> {{ product.description|default:'暂无描述' }}</p>
                                    <p><strong>商品价值：</strong> <span class="text-danger">¥{{ product.original_price }}</span></p>
                                    <p><strong>订单编号：</strong> {{ order_id }}</p>
                                    <p><strong>抽取时间：</strong> <span id="drawTime"></span></p>
                                    
                                    <div class="alert alert-info mb-2">
                                        <i class="fas fa-box-open me-2"></i> 商品来自盲盒：<strong>{{ box.name }}</strong>
                                        <p class="mb-0 small">原价：¥{{ box.original_price }}，您以 ¥{{ box.discount_price }} 购买</p>
                                    </div>
                                    
                                    {% if saved_amount > 0 %}
                                    <div class="alert alert-success">
                                        <i class="fas fa-coins me-2"></i> 您赚到了 <strong>¥{{ saved_amount|floatformat:2 }}</strong>！商品价值高于盲盒价格！
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <!-- 提取区域：二维码和超市 -->
                        <div class="row mt-4">
                            <!-- 二维码区域 -->
                            <div class="col-md-6 mb-3">
                                <div class="qr-code-container h-100">
                                    <h4 class="mb-3">取货二维码</h4>
                                    <p class="text-muted mb-3">请保存此二维码，前往超市时出示给工作人员取货</p>
                                    {% if qr_code_url %}
                                    <div class="qr-image mx-auto" style="width: 200px; height: 200px;">
                                        <img src="{{ qr_code_url }}" alt="取货二维码" class="img-fluid" onerror="this.src='/static/images/default-qr.png'; this.onerror=null;">
                                    </div>
                                    <div class="mt-3">
                                        <button onclick="window.print()" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-print me-1"></i> 打印二维码
                                        </button>
                                    </div>
                                    {% else %}
                                    <div class="alert alert-warning">
                                        <i class="fas fa-exclamation-triangle me-2"></i> 二维码生成中，请稍后刷新页面
                                        <div class="mt-2">
                                            <button onclick="window.location.reload()" class="btn btn-sm btn-primary">
                                                <i class="fas fa-sync-alt me-1"></i> 刷新页面
                                            </button>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <!-- 超市信息区域 -->
                            <div class="col-md-6 mb-3">
                                <div class="market-map-container h-100">
                                    <h4 class="mb-3">取货地点</h4>
                                    {% if market %}
                                    <div id="mapContainer"></div>
                                    <div class="market-info">
                                        <p><strong>超市名称：</strong> {{ market.name }}</p>
                                        <p><strong>地址：</strong> {{ market.address }}</p>
                                        {% if market.business_hours %}
                                        <p><strong>营业时间：</strong> {{ market.business_hours }}</p>
                                        {% endif %}
                                        {% if market.phone %}
                                        <p><strong>联系电话：</strong> {{ market.phone }}</p>
                                        {% endif %}
                                    </div>
                                    <div class="market-action d-flex">
                                        {% if market.phone %}
                                        <a href="tel:{{ market.phone }}" class="btn btn-sm btn-outline-primary me-2">
                                            <i class="fas fa-phone-alt me-1"></i> 拨打电话
                                        </a>
                                        {% endif %}
                                        <a href="https://api.map.baidu.com/marker?location={{ market.latitude }},{{ market.longitude }}&title={{ market.name }}&content={{ market.address }}&output=html" target="_blank" class="btn btn-sm btn-primary">
                                            <i class="fas fa-map-marked-alt me-1"></i> 查看路线
                                        </a>
                                    </div>
                                    {% else %}
                                    <div class="alert alert-warning">
                                        <i class="fas fa-exclamation-triangle me-2"></i> 暂无超市信息，请联系客服了解取货地点
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <!-- 管理员调试信息 -->
                        {% if request.user.is_superuser %}
                        <div class="admin-debug mt-3 p-3 text-start bg-light small">
                            <h6 class="text-muted">调试信息（仅管理员可见）：</h6>
                            <div>QR码URL: {% if qr_code_url %}{{ qr_code_url }}{% else %}未生成{% endif %}</div>
                            <div>查看模式: {% if is_view_result %}是{% else %}否{% endif %}</div>
                            <div>超市信息: {% if market %}已加载{% else %}未配置{% endif %}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{% url 'order:my_boxes' %}" class="btn btn-secondary"><i class="fas fa-box"></i> 返回我的盲盒</a>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <a href="{% url 'order:detail' order_id=order_id %}" class="btn btn-outline-primary me-2">
                                <i class="fas fa-receipt"></i> 查看订单
                            </a>
                            <a href="/" class="btn btn-primary">
                                <i class="fas fa-home"></i> 返回首页
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    /* 盒子场景 */
    .box-scene {
        width: 300px;
        height: 300px;
        perspective: 800px;
        margin: 0 auto;
        position: relative;
    }
    
    /* 立体盒子样式 */
    .box-3d {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50px;
        left: 50px;
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(30deg);
        animation: boxRotate 4s ease-in-out forwards;
    }
    
    .box-face {
        position: absolute;
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        font-weight: bold;
        color: #fff;
        border-radius: 5px;
        background: linear-gradient(135deg, #ff9800, #f57c00);
        box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
        border: 2px solid #e65100;
        opacity: 0.9;
    }
    
    .box-logo {
        font-size: 80px;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
    
    .box-front {
        transform: translateZ(100px);
    }
    
    .box-back {
        transform: rotateY(180deg) translateZ(100px);
    }
    
    .box-right {
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .box-left {
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .box-top {
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .box-bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }
    
    /* 开盒动画 */
    @keyframes boxRotate {
        0% {
            transform: rotateX(-20deg) rotateY(30deg);
        }
        10% {
            transform: rotateX(15deg) rotateY(90deg);
        }
        25% {
            transform: rotateX(45deg) rotateY(180deg) scale(1.05);
        }
        40% {
            transform: rotateX(-15deg) rotateY(270deg);
        }
        50% {
            transform: rotateX(-45deg) rotateY(360deg) scale(1.1);
        }
        65% {
            transform: rotateX(15deg) rotateY(450deg);
        }
        75% {
            transform: rotateX(45deg) rotateY(540deg) scale(1.05);
        }
        90% {
            transform: rotateX(-15deg) rotateY(630deg);
        }
        100% {
            transform: rotateX(0deg) rotateY(720deg) scale(0.1);
            opacity: 0;
        }
    }
    
    /* 状态信息 */
    .draw-status {
        opacity: 1;
        transition: opacity 0.5s ease;
    }
    
    .draw-message {
        font-size: 1rem;
        animation: pulse 1.5s infinite;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    /* 结果显示动画 */
    .fade-in {
        animation: fadeIn 1s ease forwards;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* 二维码和地图容器 */
    .qr-code-container, .market-map-container {
        padding: 20px;
        border-radius: 10px;
        background-color: #f8f9fa;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .qr-image {
        padding: 10px;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .product-details {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* 地图容器 */
    #mapContainer {
        height: 300px;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .market-info {
        margin-top: 15px;
    }
    
    .market-action {
        margin-top: 10px;
    }
</style>
{% endblock %}

{% block extra_js %}
<!-- 高德地图API -->
{% if market and market.longitude and market.latitude %}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=5f37639956a0edd28639b5adcc24bb3c"></script>
{% endif %}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 设置当前时间
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
        document.getElementById('drawTime').textContent = now.toLocaleString('zh-CN', options);
        
        {% if not is_view_result %}
        // 根据条件执行动画隐藏
        setTimeout(function() {
            document.getElementById('drawAnimation').style.display = 'none';
            document.getElementById('resultContent').classList.remove('d-none');
            document.getElementById('resultContent').classList.add('fade-in');
            
            // 在动画完成后初始化地图
            {% if market and market.longitude and market.latitude %}
            initMap();
            {% endif %}
        }, 4500);
        {% else %}
        // 直接初始化地图
        {% if market and market.longitude and market.latitude %}
        initMap();
        {% endif %}
        {% endif %}
        
        // 初始化地图
        {% if market and market.longitude and market.latitude %}
        function initMap() {
            // 初始化地图
            var map = new AMap.Map('mapContainer', {
                zoom: 15,
                center: [{{ market.longitude }}, {{ market.latitude }}]
            });
            
            // 添加标记
            var marker = new AMap.Marker({
                position: [{{ market.longitude }}, {{ market.latitude }}],
                title: '{{ market.name }}'
            });
            
            map.add(marker);
            
            // 添加信息窗体
            var infoWindow = new AMap.InfoWindow({
                content: `
                    <div class="info-window">
                        <h5>{{ market.name }}</h5>
                        <p>{{ market.address }}</p>
                        {% if market.business_hours %}
                        <p>营业时间: {{ market.business_hours }}</p>
                        {% endif %}
                    </div>
                `,
                offset: new AMap.Pixel(0, -30)
            });
            
            // 点击标记时打开信息窗体
            marker.on('click', function() {
                infoWindow.open(map, marker.getPosition());
            });
            
            // 自动打开信息窗体
            infoWindow.open(map, marker.getPosition());
        }
        {% endif %}
    });
</script>
{% endblock %}